<template>
    <div class="p-2">
      <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
        <div v-show="showSearch" class="mb-[10px]">
          <el-card shadow="hover">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
              <el-form-item label="族谱编码" prop="code">
                <el-input v-model="queryParams.code" placeholder="请输入族谱编码" clearable @keyup.enter="handleQuery" />
              </el-form-item>
              <el-form-item label="族谱名称" prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入族谱名称" clearable @keyup.enter="handleQuery" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </transition>
      
      <el-container>
        <el-header style="height: 20px;line-height: 20px;">
          <div class="card-head">
            <span class="head-content">我的家族</span>
          </div> 
        </el-header>
        <el-main>
            <div class="flex flex-wrap gap-4">
                <el-card style="max-width: 480px" v-for="info in genealogyList">
                    <template #footer>
                        <el-tooltip content="修谱" placement="top">
                        <el-button link type="primary" icon="Edit" @click="handleUpdate(info)" v-hasPermi="['system:genealogy:edit']">修谱</el-button>
                        </el-tooltip>
                        <el-tooltip content="目录" placement="top">
                        <el-button link type="primary" icon="Edit" @click="handleDirectory(info)" v-hasPermi="['system:genealogy:edit']">目录</el-button>
                        </el-tooltip>
                        <el-tooltip content="族谱树" placement="top">
                        <el-button link type="primary" icon="Share" @click="infoTree(info)" v-hasPermi="['system:genealogy:list']">族谱树</el-button>
                        </el-tooltip>
                        <!-- <el-tooltip content="删除" placement="top">
                        <el-button link type="danger" icon="Delete" @click="handleDelete(info)" v-hasPermi="['system:genealogy:remove']">删除</el-button>
                        </el-tooltip> -->
                        
                    </template>
                    <div class="content">
                      <img src="@/assets/images/cover-list2.png" style="width: 100%"/>
                      <div class="title">
                        <div class="title2">
                          <div class="title3">
                            <div class="title4">钱氏家谱</div>
                          </div>
                        </div>
                      </div>
                    </div>
                </el-card>
            </div>
        </el-main>
      </el-container>

      <el-container>
        <el-header>
          <div class="card-head">
            <span class="card-content">钱氏家谱</span>
          </div>
        </el-header>
        <el-main></el-main>
      </el-container>      
    </div>
  </template>
  
  <script setup name="Genealogy" lang="ts">
  import { listGenealogy, getGenealogy, delGenealogy, addGenealogy, updateGenealogy } from '@/api/genealogy/genealogy';
  import { GenealogyVO, GenealogyQuery, GenealogyForm } from '@/api/genealogy/genealogy/types';
  import { useRouter } from 'vue-router'
  import { useGenealStore } from '@/store/modules/genealogy';
  
  const router = useRouter();
  const genealStore = useGenealStore();
  
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  
  const genealogyList = ref<GenealogyVO[]>([]);
  const buttonLoading = ref(false);
  const loading = ref(true);
  const showSearch = ref(true);
  const ids = ref<Array<string | number>>([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  
  const queryFormRef = ref<ElFormInstance>();
  const genealogyFormRef = ref<ElFormInstance>();
  
  const dialog = reactive<DialogOption>({
    visible: false,
    title: ''
  });
  
  const initFormData: GenealogyForm = {
    id: undefined,
    code: undefined,
    name: undefined,
    remark: undefined
  }
  const data = reactive<PageData<GenealogyForm, GenealogyQuery>>({
    form: {...initFormData},
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      code: undefined,
      name: undefined,
      params: {
      }
    },
    rules: {
      code: [
        { required: true, message: "族谱编码不能为空!", trigger: "blur" },
        {pattern: /^[a-zA-Z0-9]+$/,message:"只能输入数字和英文字符",trigger:"blur"}
      ],
      name: [
        { required: true, message: "族谱名称不能为空!", trigger: "blur" }
      ]
    }
  });
  
  const { queryParams, form, rules } = toRefs(data);
  
  /** 查询族谱信息列表 */
  const getList = async () => {
    loading.value = true;
    const res = await listGenealogy(queryParams.value);
    genealogyList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  }
  
  
  /** 表单重置 */
  const reset = () => {
    form.value = {...initFormData};
    genealogyFormRef.value?.resetFields();
  }
  
  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
  }
  
  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
  }
  
  /** 多选框选中数据 */
  const handleSelectionChange = (selection: GenealogyVO[]) => {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
  }
  
  /** 新增按钮操作 */
  const handleAdd = () => {
    reset();
    dialog.visible = true;
    dialog.title = "添加族谱信息";
  }
  
  /** 修改按钮操作 */
  const handleUpdate = (row?: GenealogyVO) => {
    genealStore.setGeId(row.id)
    router.push('info');
  }

  /**族谱树 */
  const infoTree = (row?: GenealogyVO) => {
    router.push('familytree');
  }
  
  /**设置族谱目录 */
  const handleDirectory = (row?: GenealogyVO) =>{
    router.push({
      path:'/genealogy/directory',
      query: {geId: row.id}
    });
  }
  
  /** 提交按钮 */
  const submitForm = () => {
    genealogyFormRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        buttonLoading.value = true;
        if (form.value.id) {
          await updateGenealogy(form.value).finally(() =>  buttonLoading.value = false);
        } else {
          await addGenealogy(form.value).finally(() =>  buttonLoading.value = false);
        }
        proxy?.$modal.msgSuccess("操作成功");
        dialog.visible = false;
        await getList();
      }
    });
  }
  
  /** 删除按钮操作 */
  const handleDelete = async (row?: GenealogyVO) => {
    const _ids = row?.id || ids.value;
    await proxy?.$modal.confirm('是否确认删除族谱信息编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
    await delGenealogy(_ids);
    proxy?.$modal.msgSuccess("删除成功");
    await getList();
  }
  
  onMounted(() => {
    getList();
  });
  </script>

  <style>
    .card-head{
      position: relative;
      padding-left: 14px;
      font-size: 20px;
      color: #33271f;
      display: inline-flex;
      align-items: center;
    }
    .card-head::before{
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 22px;
      background-color: #f76d02;
    }
    .card-content{
      color: var(--el-text-color-regular);
      font-size: 18px;
    }
    .content{
      width: 180px;
      height: 210px;
      transform-origin: left top;
      position: relative;
    }
    .title{
      position: absolute;
      left: 130px;
      top: 30px;
      width: 27px;
      height: 95px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      border: 2px solid #fff;
      background-color: #92958d;
      padding: 1px;
    }
    .title2{
      width: 100%;
      height: 100%;
      border: 1px solid #eae2c9;
      background-color: #dab272;
      box-sizing: border-box;
      padding: 1px;
    }
    .title3{
      width: 100%;
      height: 100%;
      background-color: #fff6c3;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .title4{
      width: 100%;
      writing-mode: vertical-lr;
      white-space: nowrap;
      text-align: center;
      font-size: 14px;
      line-height: 14px;
      box-sizing: border-box;
    }
  </style>
  